<!--
 * @Author: 吴世扬 18368095041@163.com
 * @Date: 2024-03-27 11:26:59
 * @LastEditors: 吴世扬 18368095041@163.com
 * @LastEditTime: 2025-09-24 17:42:18
 * @FilePath: /vue3-admin/src/views/system/MenusManage/components/EditView/EditView.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<script lang="ts" setup>
import CustomCard from '@/components/ui/CustomCard/CustomCard.vue';
import { ref, toRefs, watchEffect } from 'vue';
import CustomDialog from '@/components/ui/CustomDialog/CustomDialog.vue';
import { useForm } from './useForm';
import type { FormInstance, CascaderProps } from 'element-plus';
import { useEnum } from '@/service/useEnum/index';

const props = defineProps<{
    modelValue: boolean;
    id?: number; // 用number | undefined vue3会错误的给出类型检测错误
    addId?: number;
}>();

const emits = defineEmits<{
    (event: 'update:model-value', value: boolean): void;
    (event: 'afterSubmit'): void;
}>();

const { modelValue, id, addId } = toRefs(props);

const formRef = ref<FormInstance>();
const {
    rules,
    dialogTitle,
    detailLoading,
    updateLoading,
    formModel,
    handleEdit,
    handleSubmit
} = useForm(formRef, id, addId, modelValue, () => emits('afterSubmit'));

const { getMenuTreeTypes } = useEnum();

const { refData: menuTreeTypes } = getMenuTreeTypes();

const menuCascaderProps: CascaderProps = {
    emitPath: false,
    checkStrictly: true
};
</script>

<template>
    <CustomDialog
        :title="dialogTitle"
        :model-value="modelValue"
        @update:model-value="(val) => emits('update:model-value', val)"
    >
        <CustomCard title="" :canCollapse="false">
            <el-form
                ref="formRef"
                :rules="rules"
                :model="formModel"
                v-loading="detailLoading"
            >
                <el-row>
                    <el-col :span="12">
                        <el-form-item
                            label="父节点"
                            prop="parentId"
                            label-width="80px"
                        >
                            <el-cascader
                                v-model="formModel.parentId"
                                :options="[
                                    {
                                        label: '根节点',
                                        value: -1,
                                        children: menuTreeTypes
                                    }
                                ]"
                                :props="menuCascaderProps"
                                clearable
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item
                            label="菜单名称"
                            prop="name"
                            label-width="80px"
                        >
                            <el-input
                                v-model="formModel.name"
                                clearable
                                style="width: 200px"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item
                            label="菜单路径"
                            prop="path"
                            label-width="80px"
                        >
                            <el-input
                                v-model="formModel.path"
                                clearable
                                style="width: 400px"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item
                            label="排序"
                            prop="sortWeight"
                            label-width="80px"
                        >
                            <el-input
                                v-model.number="formModel.sortWeight"
                                clearable
                                style="width: 200px"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item
                            label="菜单图标"
                            prop="icon"
                            label-width="80px"
                        >
                            <el-input
                                v-model="formModel.icon"
                                clearable
                                style="width: 400px"
                            />
                            <el-text size="small"
                                >系统图标查看/src/assets/icons目录；element图标，格式el-icon:xxx（例如el-icon:document）；iconify图标是远程加载的，格式iconify:xxx（例如iconify:majesticons:data）</el-text
                            >
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="flex-row jc-center">
                    <el-button
                        type="primary"
                        @click.stop="handleSubmit"
                        :loading="updateLoading"
                        >提交</el-button
                    >
                    <el-button @click.stop="() => handleEdit(id, addId)"
                        >重置</el-button
                    >
                </el-row>
            </el-form>
        </CustomCard>
    </CustomDialog>
</template>

<!-- <style lang="scss" scoped>
.editview-container {
    height: 100%;
}
</style> -->
